<template>
  <div>
    <Header
      title="购物清单"
      backgroundColor="backgroundColor"
      color="color"
    ></Header>
    <div class="main">
      <component :is="comName"></component>
    </div>
    <Tabbar :list="tabList" @changebar="changFn"></Tabbar>
  </div>
</template>

<script>
import Header from "./components/Header";
import Tabbar from "./components/Tabbar";

import GoodList from "./views/GoodList";
import Search from "./views/Search";
import UseInfo from "./views/UseInfo";
export default {
  components: {
    Header,
    Tabbar,
    GoodList,
    Search,
    UseInfo,
  },
  data() {
    return {
      comName: "GoodList",
      tabList: [
        {
          iconText: "icon-shangpinliebiao",
          text: "商品列表",
          componentName: "GoodList",
        },
        {
          iconText: "icon-sousuo",
          text: "商品搜索",
          componentName: "Search",
        },
        {
          iconText: "icon-user",
          text: "我的信息",
          componentName: "UseInfo",
        },
      ],
    };
  },
  methods: {
    changFn(index) {
      this.comName = this.tabList[index].componentName;
    },
  },
};
</script>

<style scoped>
.main {
  padding: 45px 0 50px 0;
}
</style>